<!-- 提现 -->
<template>
    <van-nav-bar
        left-arrow
        :title="$t('wallet.drawCard')"
        @click-left="router.back()"
    /> 
    <van-form class="app-pad feild withdraw">
        <div class="withdraw-card">
            <label>
                {{ $t('wallet.acceptCard') }}
                <span class="now-draw">({{ $t('wallet.nowDraw') }})</span>
            </label>
            <van-field v-model="form.card" readonly @click="onShow" :border="false" :placeholder="$t('wallet.placeChoose')">
                <template #right-icon>
                    <img src="@/assets/images/choose.png" alt="" class="withdraw-choose">
                </template>
            </van-field>
            
        </div>
        
        <div class="withdraw-card">
            <label>
                {{ $t('wallet.drawMoneyNum') }}
            </label>
            <van-field 
                v-model="form.money" 
                required 
                name="validator"
                :rules="[{ required: true, message: '' },{ message: minMsg, validator: dyncValidator }, ]"
                type="number"
                :maxLength="20"
                :border="false" 
                :placeholder="$t('place')"
              >
                <template #left-icon>
                    <span>{{ $t('moneyIcon') }}</span>
                </template>
                <template #right-icon>
                    <span @click="onAll">{{ $t('wallet.allDarw') }}</span>
                </template>
            </van-field>
            <div class="withdraw-err"  v-if="form.money > form.allNum">{{ $t('wallet.beyond') }}</div>
            <div class="withdraw-all" v-else>{{ $t('wallet.surplus') + $t('moneyIcon') }}{{ form.allNum }}</div>
        </div>
        <label>
            {{ $t('wallet.moneyPassword') }}
        </label>
        <van-field v-model="form.payPass" type="password"  :maxLength="20" :border="false" :placeholder="$t('place')">
        </van-field>
        <div class="withdraw-text">
            <div>{{ $t('wallet.drawText1') }}</div>
            <div>{{ $t('wallet.drawText2') }}</div>
        </div>
        
        <br>
        <van-button type="primary" @click="onDraw" :disabled="disDraw || !(form.money > 0)" round block>{{ $t('wallet.sureDraw') }}</van-button>
    </van-form>

    <van-dialog 
        :title="$t('wallet.drawSuccess')"  
        :message="$t('wallet.waitLook')" 
        v-model:show="showDialog">
        <template #footer>
            <div class="withdraw-btn">
                <van-button type="primary" @click="onSure" round size="mini"> {{ $t('sure') }} </van-button>
            </div>
        </template>
    </van-dialog>

    <van-action-sheet 
        v-model:show="action.show" 
        :actions="action.list"  
        @select="onSelect" 
        :loading="action.loading"
        :title="$t('wallet.cDrawCard')"
        :cancel-text="$t('cancel')"
    >
        <div class="my-card" @click="onJump" v-if="!action.list.length">
            <van-icon name="add-o" size="30" class="my-card-icon"/>
            {{ $t('wallet.addMyCard') }}
        </div>
    </van-action-sheet>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router"
import { useI18n } from 'vue-i18n';
import { reactive,  ref } from "@vue/reactivity";
import { getCardList, withdraw } from "@/api/card"
import { getConfig } from "@/api/public"
import { Toast } from "vant";
import { computed } from "@vue/runtime-core";
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const showDialog = ref(false)
function onShowDialog () {
    showDialog.value = !showDialog.value
}
function onSure () {
    onShowDialog()
    router.back()
}
const action = reactive({
    show: false,
    list: [],
    loading: false
})
function onShow () {
    action.show = !action.show
}

const form = reactive({
    card: "",
    money: "",
    allNum: +route.query.money,
    bankCardId: "",
    payPass: "",
    
})
// 对值进行限制
const dyncValidator = (val) => {
    console.log(val)
    let bol = val >= minNum
    console.log(bol)
    return bol
}
let minNum = 0
getConfig('withdrawal').then(res => {
    minNum = +res.msg || 0
})
let minMsg = ref("")
getConfig('withdrawalMsg').then(res => {
    minMsg.value = res.msg || ""
})
let disDraw = ref(true)
disDraw = computed({
    get () {
        const { card, money, allNum, payPass } = form
        let bol = [card, money,  payPass].some(v => !v) || money > allNum
        console.log('bol++++++', bol)
        return bol
    }
})
function onSelect (e) {
    console.log(e)
    form.card = e.name
    form.bankCardId = e.id
    onShow()
}
// 校验
function validator (value) {
    console.log("触发了哦")
    return value <= form.allNum
}
// 全部提现
function onAll() {
    form.money = form.allNum
}
// 获取银行卡列表
getCardList().then(res => {
    if (res.code != 200) return
    let list = []
    res.data.map(v => {
        list.push({
            name: `${v.bankName}(${v.bankCardNumber.slice(-4)})`,
            id: v.id
        })
    })
    action.list = list
})
// 跳转
function onJump () {
    router.push("/addCard")
}
// 提现
async function onDraw () {
    action.loading = true
    const { bankCardId, payPass, money } = form
    let ret = await withdraw({ bankCardId, payPass,  money})
    action.loading = false
    if (ret.code != 200) return
    onShowDialog()
}
function onGetMoney () {
    getUserBalance().then(res => {
        console.log(res)
        if (res.code != 200) return 
        // Toast("获取金额失败")
        form.allNum = res.data
    })
}
</script>
<style lang="less">
@import "@/assets/css/field.less";
.my-card {
        border: 2px dashed #575757;
        border-radius: 32px;
        padding: 10px;
        margin: 20px 64px;
        text-align: center;
        color: var(--primary);
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        &-icon {
            margin: 0 4px;
        }
    }
.withdraw-btn {
    text-align: center;
    padding-bottom: 10px;
    button {
        width: 80px;
    }
}
.withdraw {
    &-card {
        background: #FFFFFF;
        box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.18);
        padding: 13px 5px;
        border-radius: 5px 5px 0px 0px;
        margin-top: 8px;
    }
   
    &-text {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        text-align: center;
        color: #666;
        margin-top: 22px;
    }

    &-choose {
        width: 10px;
    }
    &-all {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }
    &-err {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FF0000;
    }
    .van-field__right-icon {
        font-size: 11px;
        color: #333;
    }
}
.now-draw {
    color: var(--primary);
    font-size: 12px;
}
</style>